<template>
  <div class="login-container clearfix">
    <div class="title-top">
      江小墙 <span>·</span> 在线校园交流平台
    </div>
    <div class="wrapper">
      <div class="card-switch">
        <label class="switch">
          <input
            type="checkbox"
            class="toggle"
          >
          <span class="slider"></span>
          <span class="card-side"></span>
          <div class="flip-card__inner">
            <div class="flip-card__front">
              <div class="title">Log in</div>
              <form
                class="flip-card__form"
                action=""
              >
                <input
                  class="flip-card__input"
                  name="username"
                  placeholder="用户名"
                  type="text"
                  v-model="form.username"
                >
                <input
                  class="flip-card__input"
                  name="password"
                  placeholder="密码"
                  type="password"
                  v-model="form.password"
                >
                <button
                  class="flip-card__btn"
                  @click="loginFn"
                > 登录</button>
              </form>
            </div>
            <div class="flip-card__back">
              <div class="title">Sign up</div>
              <form
                class="flip-card__form"
                action=""
              >
                <input
                  class="flip-card__input"
                  placeholder="用户名"
                  type="text"
                  name="username"
                  v-model="form.username"
                >
                <input
                  class="flip-card__input"
                  name="password"
                  placeholder="密码"
                  type="password"
                  v-model="form.password"
                >
                <input
                  class="flip-card__input"
                  name="password"
                  placeholder="确认密码"
                  type="password"
                  v-model="form.repassword"
                >
                <button
                  class="flip-card__btn"
                  @click="registerFn"
                >注册</button>
              </form>
            </div>
          </div>
        </label>
      </div>
    </div>
    <div class="animation-container">
      <div class="animation">♬</div>

    </div>
    <div class="animation-container">
      <div class="animation">♬</div>
    </div>
    <div class="animation-container">
      <div class="animation">♬</div>
    </div>
    <div class="animation-container">
      <div class="animation">♬</div>
    </div>
    <div class="animation-container">
      <div class="animation">♬</div>
    </div>
  </div>
</template>

<script>
import { registerAPI, loginAPI } from "@/api";
import { mapMutations } from "vuex";

export default {
  name: "Login",
  data() {
    return {
      pattern: {
        // usernamePattern: /^([\u4e00-\u9fa5]{1,6}|[a-zA-Z\d_]{1,10})$/,
        usernamePattern: /^[\s\S]*$/,
        passwordPattern: /(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,20}/,
        emailPattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
      },
      form: {
        username: "", //用户名
        password: "",
        repassword: "",
      },
    };
  },
  methods: {
    ...mapMutations(["UPDATETOKEN"]),
    // 注册点击事件
    async registerFn(e) {
      e.preventDefault(); // 阻止表单默认提交行为
      // js再检测一下 防止直接点按钮提交
      if (!this.pattern.usernamePattern.test(this.form.username)) {
        alert("用户名格式不正确");
        return false;
      }
      if (this.pattern.passwordPattern.test(this.form.password)) {
        alert("密码格式不正确");
        return false;
      }
      if (this.form.password !== this.form.repassword) {
        alert("两次密码不同");
        return false;
      }
      // 通过提交 数据
      try {
        const res = await registerAPI(this.form);
        console.log(res);
        if (res.status !== 0) {
          console.log(res);
          alert(res.message);
          return false;
        } else {
          alert(res.message);

          return false;
        }
      } catch (err) {
        alert("注册失败" + err.message);
      }
    },

    // 登录点击事件
    async loginFn(e) {
      e.preventDefault();
      // 检查表单数据
      if (!this.pattern.usernamePattern.test(this.form.username)) {
        alert("用户名格式不正确");
        return false;
      }
      if (this.pattern.passwordPattern.test(this.form.password)) {
        alert("密码格式不正确");
        return false;
      }
      // 发请求
      const res = await loginAPI(this.form);
      if (res.status !== 0) {
        alert(res.message);
        return false;
      }

      // 登录成功
      alert(res.message);
      this.UPDATETOKEN(res.token);

      this.$router.push("/my");
      this.$store.dispatch("initUserInfo");
      /* 连接socket */
      this.$socket.connect();
      this.$socket.emit("login", this.form.username);
    },
  },
};
</script>


<style   scoped>
.login-container {
  box-sizing: border-box;
  /* background: url("../../assets/login_bg.jpg"); */
  background-size: contain;
  /* background-color: rgb(134, 149, 250); */
  background: url("../../assets/wallpaper-1.jpg");
  background-repeat: repeat;
  overflow: hidden;
  height: 100%;
  max-height: 1080px;
  max-width: 1920px;
  overflow: hidden;
  z-index: 5;
  /* width: 100px; */
}
.title-top {
  margin: 20px 0 20px 0;
  font-size: 20px;
  /* font-weight: 900; */
  text-align: center;
  color: var(--main-color);
  /* color: var(--bg-color); */
  border-radius: 20px;
  background-color: rgb(102, 102, 255);
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  width: 100%;
  height: 5%;
  transform: translateX(0.1%);
  color: #323f3e;
  font-weight: 600;
}
.title-top > span {
  margin: 0 10px;
}
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
.wrapper {
  z-index: 4;
  --input-focus: #2d8cf0;
  --font-color: #323232;
  --font-color-sub: #666;
  --bg-color: #fff;
  --bg-color-alt: #666;
  --main-color: #323232;
  width: 400px;
  height: 270px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-15%, -10%);
  padding: 0 30px;
  box-sizing: border-box;
  /* display: flex; */
  /* flex-direction: column; */
  /* align-items: center; */
}
/* switch card */
.switch {
  transform: translateY(-200px);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
  width: 50px;
  height: 20px;
}

.card-side::before {
  position: absolute;
  content: "登录";
  left: -70px;
  top: 0;
  width: 100px;
  text-decoration: underline;
  color: var(--font-color);
  font-weight: 600;
  font-size: 1.5rem;
}

.card-side::after {
  position: absolute;
  content: "注册";
  left: 70px;
  top: 0;
  width: 100px;
  text-decoration: none;
  color: var(--font-color);
  font-weight: 600;
  font-size: 1.5rem;
}

.toggle {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  box-sizing: border-box;
  border-radius: 5px;
  border: 2px solid var(--main-color);
  box-shadow: 4px 4px var(--main-color);
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bg-colorcolor);
  transition: 0.3s;
}

.slider:before {
  box-sizing: border-box;
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  border: 2px solid var(--main-color);
  border-radius: 5px;
  left: -2px;
  bottom: 2px;
  background-color: var(--bg-color);
  box-shadow: 0 3px 0 var(--main-color);
  transition: 0.3s;
}

.toggle:checked + .slider {
  background-color: var(--input-focus);
}

.toggle:checked + .slider:before {
  transform: translateX(30px);
}

.toggle:checked ~ .card-side:before {
  text-decoration: none;
}

.toggle:checked ~ .card-side:after {
  text-decoration: underline;
}

/* card */

.flip-card__inner {
  width: 300px;
  height: 350px;
  position: relative;
  background-color: transparent;
  perspective: 1000px;
  /* width: 100%;
    height: 100%; */
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.toggle:checked ~ .flip-card__inner {
  transform: rotateY(180deg);
}

.toggle:checked ~ .flip-card__front {
  box-shadow: none;
}

.flip-card__front,
.flip-card__back {
  padding: 20px;
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  /* background: lightgrey; */
  background-color: rgb(114, 124, 255);
  gap: 20px;
  border-radius: 5px;
  border: 2px solid var(--main-color);
  box-shadow: 4px 4px var(--main-color);
}

.flip-card__back {
  width: 100%;
  transform: rotateY(180deg);
}

.flip-card__form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.title {
  margin: 20px 0 20px 0;
  font-size: 25px;
  font-weight: 900;
  text-align: center;
  color: var(--main-color);
  /* color: var(--bg-color); */
  border-radius: 20px;
  background-color: rgb(102, 102, 255);
}

.flip-card__input {
  width: 250px;
  height: 40px;
  border-radius: 5px;
  border: 2px solid var(--main-color);
  background-color: var(--bg-color);
  box-shadow: 4px 4px var(--main-color);
  font-size: 15px;
  font-weight: 600;
  color: var(--font-color);
  padding: 5px 10px;
  outline: none;
}

.flip-card__input::placeholder {
  color: var(--font-color-sub);
  opacity: 0.8;
}

.flip-card__input:focus {
  border: 2px solid var(--input-focus);
}

.flip-card__btn:active,
.button-confirm:active {
  box-shadow: 0px 0px var(--main-color);
  transform: translate(3px, 3px);
}

.flip-card__btn {
  margin: 20px 0 20px 0;
  width: 120px;
  height: 40px;
  border-radius: 5px;
  border: 2px solid var(--main-color);
  background-color: var(--bg-color);
  box-shadow: 4px 4px var(--main-color);
  font-size: 17px;
  font-weight: 600;
  color: var(--font-color);
  cursor: pointer;
}
/* 动画 */
.animation,
.animation::before,
.animation::after {
  position: relative;
  box-sizing: border-box;
}

.animation-container {
  z-index: 2;
  position: absolute;
  top: 40%;
  left: 30%;
}
.animation-container:nth-child(2) {
  top: 10%;
  left: 70%;
}
.animation-container:nth-child(3) {
  top: 60%;
  left: 20%;
  z-index: 2;
}
.animation-container:nth-child(4) {
  top: 10%;
  left: 5%;
  z-index: 2;
}
.animation-container:nth-child(5) {
  top: 75%;
  left: 85%;
  z-index: 2;
}
.animation {
  --color1: hsl(196, 50%, 50%);
  --color1alt: hsl(196, 50%, 33%);
  --color1alta: hsl(196, 50%, 73%);
  --color2: hsl(356, 70%, 50%);
  --color2alt: hsl(356, 70%, 40%);
  --color2alta: hsl(356, 70%, 80%);
  --color3: hsl(33, 80%, 60%);
  --color3alt: rgb(127, 127, 253);
  --white: #eaeaef;
  --white-between: hsla(0, 0%, 0%, 0.2);
  --black: var(--color1alt);

  --height: 40vmin;
  --bellow-y: 1vmin;
  --bellow-y-less: 39vmin;
  --bellow-width: 50vmin;

  --button-dim: 1.4vmin;
  --button: radial-gradient(
    circle,
    var(--color1) var(--button-dim),
    transparent var(--button-dim)
  );
  --button1: radial-gradient(
    circle,
    var(--button1-color, var(--color1)) var(--button1-dim, var(--button-dim)),
    transparent var(--button1-dim, var(--button-dim))
  );
  --button4: radial-gradient(
    circle,
    var(--button4-color, var(--color1)) var(--button4-dim, var(--button-dim)),
    transparent var(--button4-dim, var(--button-dim))
  );
  --button7: radial-gradient(
    circle,
    var(--button7-color, var(--color1)) var(--button7-dim, var(--button-dim)),
    transparent var(--button7-dim, var(--button-dim))
  );
  --button8: radial-gradient(
    circle,
    var(--button8-color, var(--color1)) var(--button8-dim, var(--button-dim)),
    transparent var(--button8-dim, var(--button-dim))
  );
  --button-x: -3vmin;
  --button-y: -16vmin;
  --button2-x: 2vmin;
  --button2-y: -12vmin;
  --button3-y: -8vmin;
  --button4-x: 2vmin;
  --button4-y: -4vmin;
  --button5-y: 0vmin;
  --button6-x: 2vmin;
  --button6-y: 4vmin;
  --button7-y: 8vmin;
  --button8-x: 2vmin;
  --button8-y: 12vmin;
  --button9-y: 16vmin;

  --button-key-x: 5.5vmin;
  --button-key1-y: -6vmin;
  --button-key2-y: 0vmin;
  --button-key3-y: 6vmin;

  --shine: linear-gradient(
    to bottom,
    transparent 11.5%,
    var(--color2) 11.5%,
    var(--color2) 29.5%,
    transparent 29.5%,
    transparent 70.5%,
    var(--color2) 70.5%,
    var(--color2) 88.5%,
    transparent 88.5%
  );
  --shine-horizontal: linear-gradient(
    to right,
    transparent 9.5%,
    var(--color2) 41.5%,
    var(--color2) 58.5%,
    transparent 86.5%
  );

  --the-black-keys: linear-gradient(
    to bottom,
    transparent 3.5%,
    var(--black1, var(--black)) 3.5%,
    var(--black1, var(--black)) 6.5%,
    transparent 6.5%,
    transparent 8.5%,
    var(--black2, var(--black)) 8.5%,
    var(--black2, var(--black)) 11.5%,
    transparent 11.5%,
    transparent 13.5%,
    var(--black3, var(--black)) 13.5%,
    var(--black3, var(--black)) 16.5%,
    transparent 16.5%,

    transparent 23.5%,
    var(--black4, var(--black)) 23.5%,
    var(--black4, var(--black)) 26.5%,
    transparent 26.5%,
    transparent 28.5%,
    var(--black5, var(--black)) 28.5%,
    var(--black5, var(--black)) 31.5%,
    transparent 31.5%,

    transparent 38.5%,
    var(--black6, var(--black)) 38.5%,
    var(--black6, var(--black)) 41.5%,
    transparent 41.5%,
    transparent 43.5%,
    var(--black7, var(--black)) 43.5%,
    var(--black7, var(--black)) 46.5%,
    transparent 46.5%,
    transparent 48.5%,
    var(--black8, var(--black)) 48.5%,
    var(--black8, var(--black)) 51.5%,
    transparent 51.5%,

    transparent 58.5%,
    var(--black9, var(--black)) 58.5%,
    var(--black9, var(--black)) 61.5%,
    transparent 61.5%,
    transparent 63.5%,
    var(--black10, var(--black)) 63.5%,
    var(--black10, var(--black)) 66.5%,
    transparent 66.5%,

    transparent 73.5%,
    var(--black11, var(--black)) 73.5%,
    var(--black11, var(--black)) 76.5%,
    transparent 76.5%,
    transparent 78.5%,
    var(--black12, var(--black)) 78.5%,
    var(--black12, var(--black)) 81.5%,
    transparent 81.5%,
    transparent 83.5%,
    var(--black13, var(--black)) 83.5%,
    var(--black13, var(--black)) 86.5%,
    transparent 86.5%,

    transparent 93.5%,
    var(--black14, var(--black)) 93.5%,
    var(--black14, var(--black)) 96.5%,
    transparent 96.5%
  );

  /* If not animating, the keys can be done with a repeating linear gradient, breaking it out explicity (a few lines down) allows us more animation options 
  --keyboard: repeating-linear-gradient(to bottom, 
      var(--white-between) 0%,
      var(--white-between) 0.4%,
      var(--white) 0.4%,
      var(--white) 5%);
  */

  --keyboard: linear-gradient(
    to bottom,
    var(--white-between) 0%,
    var(--white-between) 0.4%,
    var(--white1, var(--white)) 0.4%,
    var(--white1, var(--white)) 5%,
    var(--white-between) 5%,
    var(--white-between) 5.4%,
    var(--white2, var(--white)) 5.4%,
    var(--white2, var(--white)) 10%,
    var(--white-between) 10%,
    var(--white-between) 10.4%,
    var(--white3, var(--white)) 10.4%,
    var(--white3, var(--white)) 15%,
    var(--white-between) 15%,
    var(--white-between) 15.4%,
    var(--white4, var(--white)) 15.4%,
    var(--white4, var(--white)) 20%,
    var(--white-between) 20%,
    var(--white-between) 20.4%,
    var(--white5, var(--white)) 20.4%,
    var(--white5, var(--white)) 25%,
    var(--white-between) 25%,
    var(--white-between) 25.4%,
    var(--white6, var(--white)) 25.4%,
    var(--white6, var(--white)) 30%,
    var(--white-between) 30%,
    var(--white-between) 30.4%,
    var(--white7, var(--white)) 30.4%,
    var(--white7, var(--white)) 35%,
    var(--white-between) 35%,
    var(--white-between) 35.4%,
    var(--white8, var(--white)) 35.4%,
    var(--white8, var(--white)) 40%,
    var(--white-between) 40%,
    var(--white-between) 40.4%,
    var(--white9, var(--white)) 40.4%,
    var(--white9, var(--white)) 45%,
    var(--white-between) 45%,
    var(--white-between) 45.4%,
    var(--white10, var(--white)) 45.4%,
    var(--white10, var(--white)) 50%,
    var(--white-between) 50%,
    var(--white-between) 50.4%,
    var(--white11, var(--white)) 50.4%,
    var(--white11, var(--white)) 55%,
    var(--white-between) 55%,
    var(--white-between) 55.4%,
    var(--white12, var(--white)) 55.4%,
    var(--white12, var(--white)) 60%,
    var(--white-between) 60%,
    var(--white-between) 60.4%,
    var(--white13, var(--white)) 60.4%,
    var(--white13, var(--white)) 65%,
    var(--white-between) 65%,
    var(--white-between) 65.4%,
    var(--white14, var(--white)) 65.4%,
    var(--white14, var(--white)) 70%,
    var(--white-between) 70%,
    var(--white-between) 70.4%,
    var(--white15, var(--white)) 70.4%,
    var(--white15, var(--white)) 75%,
    var(--white-between) 75%,
    var(--white-between) 75.4%,
    var(--white16, var(--white)) 75.4%,
    var(--white16, var(--white)) 80%,
    var(--white-between) 80%,
    var(--white-between) 80.4%,
    var(--white17, var(--white)) 80.4%,
    var(--white17, var(--white)) 85%,
    var(--white-between) 85%,
    var(--white-between) 85.4%,
    var(--white18, var(--white)) 85.4%,
    var(--white18, var(--white)) 90%,
    var(--white-between) 90%,
    var(--white-between) 90.4%,
    var(--white19, var(--white)) 90.4%,
    var(--white19, var(--white)) 95%,
    var(--white-between) 95%,
    var(--white-between) 95.4%,
    var(--white20, var(--white)) 95.4%,
    var(--white20, var(--white)) 100%
  );

  --keyboard-base: linear-gradient(
    to right,
    var(--color3alt),
    var(--color3alt)
  );

  --black-keys-position: 45% center;
  --black-keys-size: 36% 84%;
  --keyboard-position: left center;
  --keyboard-size: 66% 84%;

  --squeeze-duration: 13000ms;
  --button-duration: 2300ms;
  --squeeze-state: running;

  --note-color1: rgba(255, 255, 255, 0.1);
  --note-color2: rgba(255, 255, 255, 0.2);
  --note-color3: rgba(255, 255, 255, 0.05);
  --note-x1: -10vmin;
  --note-x2: -16vmin;
  --note-x3: -8vmin;

  --notes-full-1: var(--note-x1) 5vmin 0vmin var(--note-color1),
    var(--note-x2) 25vmin 0vmin var(--note-color2),
    var(--note-x3) 37.5vmin 0vmin var(--note-color3);
  --notes-full-2: -8vmin 5vmin 0vmin rgba(255, 255, 255, 0.4),
    -10vmin 25vmin 0vmin rgba(255, 255, 255, 0.02),
    -14vmin 37.5vmin 0vmin rgba(255, 255, 255, 0.24);
  --notes-full-3: -12vmin 5vmin 0vmin rgba(255, 255, 255, 0.1),
    -8vmin 25vmin 0vmin rgba(255, 255, 255, 0.2),
    -16vmin 37.5vmin 0vmin rgba(255, 255, 255, 0.4);
  --notes-full-4: -16vmin 5vmin 0vmin rgba(255, 255, 255, 0.2),
    -13vmin 25vmin 0vmin rgba(255, 255, 255, 0.3),
    -9vmin 37.5vmin 0vmin rgba(255, 255, 255, 0.1);
}

/*keyboard side*/
.animation {
  width: calc(var(--bellow-width) * 0.36);
  height: calc(var(--height) + 5vmin);
  border-radius: 4vmin 1vmin 1vmin 4vmin;
  border: 0vmin solid var(--color2);

  background: var(--shine), var(--shine), var(--button-key1, var(--button)),
    var(--button-key2, var(--button)), var(--button-key3, var(--button)),
    var(--the-black-keys), var(--keyboard), var(--keyboard-base);
  background-repeat: no-repeat;

  background-position: 80% 0, 85% 0, var(--button-key-x) var(--button-key1-y),
    var(--button-key-x) var(--button-key2-y),
    var(--button-key-x) var(--button-key3-y), var(--black-keys-position),
    var(--keyboard-position), 0 0;

  background-size: 1px 100%, 2px 100%, 100%, 100%, 100%, var(--black-keys-size),
    var(--keyboard-size), 100%;

  box-shadow: inset 1vmin 0px 0 1vmin rgba(235, 235, 239, 0.2);

  transform: translateX(calc(var(--bellow-width) * -0.66));

  text-shadow: var(--notes-full-1);

  color: rgba(0, 0, 0, 0);
  font-size: 4vmin;
}

/* bellows */
.animation::before {
  width: var(--bellow-width);
  height: var(--height);
  background: linear-gradient(
      to right,
      rgba(255, 255, 255, 0),
      rgba(255, 255, 255, 0.02)
    ),
    repeating-linear-gradient(
      to right,
      var(--color1) 0vmin,
      var(--color1) 2.5vmin,
      var(--color1alt) 2.5vmin,
      var(--color1alt) 5vmin
    );
  top: 2.5vmin;
  left: 100%;
  bottom: 0;
}

@supports (clip-path: polygon(0% 0%, 0% 10%, 10% 0%)) {
  .animation::before {
    clip-path: polygon(
      0% 0%,
      2.5vmin var(--bellow-y),
      5vmin 0,
      7.5vmin var(--bellow-y),
      10vmin 0,
      12.5vmin var(--bellow-y),
      15vmin 0,
      17.5vmin var(--bellow-y),
      20vmin 0,
      22.5vmin var(--bellow-y),
      25vmin 0,
      27.5vmin var(--bellow-y),
      30vmin 0,
      32.5vmin var(--bellow-y),
      35vmin 0,
      37.5vmin var(--bellow-y),
      40vmin 0,
      42.5vmin var(--bellow-y),
      45vmin 0,
      47.5vmin var(--bellow-y),
      50vmin 0,
      50vmin var(--height),
      47.5vmin var(--bellow-y-less),
      45vmin var(--height),
      42.5vmin var(--bellow-y-less),
      40vmin var(--height),
      37.5vmin var(--bellow-y-less),
      35vmin var(--height),
      32.5vmin var(--bellow-y-less),
      30vmin var(--height),
      27.5vmin var(--bellow-y-less),
      25vmin var(--height),
      22.5vmin var(--bellow-y-less),
      20vmin var(--height),
      17.5vmin var(--bellow-y-less),
      15vmin var(--height),
      12.5vmin var(--bellow-y-less),
      10vmin var(--height),
      7.5vmin var(--bellow-y-less),
      5vmin var(--height),
      2.5vmin var(--bellow-y-less),
      0vmin var(--height)
    );
  }
}

/* button side */
.animation::after {
  left: calc(100% + var(--bellow-width));
  top: 0;
  bottom: 0;
  width: calc(var(--bellow-width) * 0.3);
  border-radius: 1vmin 4vmin 4vmin 1vmin;

  background: var(--shine-horizontal), var(--shine-horizontal),
    var(--button1, var(--button)), var(--button2, var(--button)),
    var(--button3, var(--button)), var(--button4, var(--button)),
    var(--button5, var(--button)), var(--button6, var(--button)),
    var(--button7, var(--button)), var(--button8, var(--button)),
    var(--button9, var(--button)),
    linear-gradient(var(--color3alt), var(--color3alt));
  background-repeat: no-repeat;

  background-position: 1.5vmin 8%, 1.5vmin 92%,
    var(--button1-x, var(--button-x)) var(--button1-y, var(--button-y)),
    var(--button2-x, var(--button-x)) var(--button2-y, var(--button-y)),
    var(--button3-x, var(--button-x)) var(--button3-y, var(--button-y)),
    var(--button4-x, var(--button-x)) var(--button4-y, var(--button-y)),
    var(--button5-x, var(--button-x)) var(--button5-y, var(--button-y)),
    var(--button6-x, var(--button-x)) var(--button6-y, var(--button-y)),
    var(--button7-x, var(--button-x)) var(--button7-y, var(--button-y)),
    var(--button8-x, var(--button-x)) var(--button8-y, var(--button-y)),
    var(--button9-x, var(--button-x)) var(--button9-y, var(--button-y)),
    center center;

  --default-size: 100%;

  background-size: 80% 2px, 80% 2px, var(--default-size), var(--default-size),
    var(--default-size), var(--default-size), var(--default-size),
    var(--default-size), var(--default-size), var(--default-size),
    var(--default-size), var(--default-size);

  box-shadow: inset -1vmin 0px 0px 1vmin rgba(235, 235, 239, 0.2);
}

.animation::before,
.animation::after {
  content: "";
  position: absolute;
}

/* CSS Transform Animations */
.animation::before {
  animation: squeeze var(--squeeze-duration) 0ms infinite alternate ease-in-out;
  animation-play-state: var(--squeeze-state, paused);
  transform-origin: left center;
}
.animation::after {
  animation: go-with-squeeze var(--squeeze-duration) 0ms infinite alternate
    ease-in-out;
  animation-play-state: var(--squeeze-state, paused);
  will-change: transform;
}
.animation {
  --extra-animations: note-float 3200ms infinite alternate ease-in-out;
  animation: go-against-squeeze var(--squeeze-duration) 0ms infinite alternate
      ease-in-out,
    var(--extra-animations);
  animation-play-state: var(--squeeze-state, paused);
  will-change: transform, text-shadow;
  transition: text-shadow 2000ms ease-in-out;
}

.supports-variables-in-keyframes .animation {
  --extra-animations: press-button1 var(--button-duration, 1000ms) 200ms
      infinite alternate,
    press-button4 var(--button-duration, 1000ms) 2000ms infinite alternate,
    press-button7 var(--button-duration, 1000ms) -1200ms infinite alternate,
    press-button8 var(--button-duration, 1000ms) 3400ms infinite alternate,
    press-keys var(--keys-duration, 8000ms) 0ms infinite both,
    note-float 3200ms infinite alternate ease-in-out;
}

@keyframes squeeze {
  80%,
  0% {
    transform: scaleX(1) translate3d(0, 0, 0);
  }
  40% {
    transform: scaleX(0.8) translate3d(0, 0, 0);
  }
  100%,
  60%,
  13% {
    transform: scaleX(0.3) translate3d(0, 0, 0);
  }
}
@keyframes go-with-squeeze {
  80%,
  0% {
    transform: translateX(0);
  }
  40% {
    transform: translateX(calc(var(--bellow-width) * -0.2));
  }
  100%,
  60%,
  13% {
    transform: translateX(calc(var(--bellow-width) * -0.7));
  }
}
@keyframes go-against-squeeze {
  80%,
  0% {
    transform: translateX(calc(var(--bellow-width) * -0.66));
  }
  40% {
    transform: translateX(calc(var(--bellow-width) * -0.56));
  }
  100%,
  60%,
  13% {
    transform: translateX(calc(var(--bellow-width) * -0.31));
  }
}
@keyframes note-float {
  30% {
    text-shadow: var(--notes-full-2);
  }
  60% {
    text-shadow: var(--notes-full-3);
  }
  100% {
    text-shadow: var(--notes-full-4);
  }
}

@keyframes press-button1 {
  50% {
    --button1-dim: 1.2vmin;
    --button1-color: var(--color1alt);
  }
}
@keyframes press-button4 {
  50% {
    --button4-dim: 1.2vmin;
    --button4-color: var(--color1alt);
  }
}
@keyframes press-button7 {
  50% {
    --button7-dim: 1.2vmin;
    --button7-color: var(--color1alt);
  }
}
@keyframes press-button8 {
  50% {
    --button8-dim: 1.2vmin;
    --button8-color: var(--color1alt);
  }
}
@keyframes press-keys {
  0% {
    --white1: var(--color2alta);
  }
  3% {
    --white1: var(--white);
    --white2: var(--white);
    --black1: var(--color2alt);
  }
  6% {
    --black1: var(--black);
    --black2: var(--black);
    --white2: var(--color2alta);
  }
  9% {
    --white2: var(--white);
    --white3: var(--white);
    --black2: var(--color2alt);
  }
  12% {
    --black2: var(--black);
    --black3: var(--black);
    --white3: var(--color2alta);
  }
  15% {
    --white3: var(--white);
    --white4: var(--white);
    --black3: var(--color2alt);
  }
  18% {
    --black3: var(--black);
    --white5: var(--white);
    --white4: var(--color2alta);
  }
  21% {
    --white4: var(--white);
    --black4: var(--black);
    --white5: var(--color2alta);
  }
  24% {
    --white5: var(--white);
    --white6: var(--white);
    --black4: var(--color2alt);
  }
  27% {
    --black4: var(--black);
    --black5: var(--black);
    --white6: var(--color2alta);
  }
  30% {
    --white6: var(--white);
    --white7: var(--white);
    --black5: var(--color2alt);
  }
  33% {
    --black5: var(--black);
    --white8: var(--white);
    --white7: var(--color2alta);
  }
  36% {
    --black6: var(--black);
    --white7: var(--white);
    --white8: var(--color2alta);
  }

  39% {
    --white8: var(--white);
    --white9: var(--white);
    --black6: var(--color2alt);
  }
  42% {
    --black6: var(--black);
    --black7: var(--black);
    --white9: var(--color2alta);
  }
  45% {
    --white9: var(--white);
    --white10: var(--white);
    --black7: var(--color2alt);
  }
  48% {
    --black7: var(--black);
    --black8: var(--black);
    --white10: var(--color2alta);
  }
  51% {
    --white10: var(--white);
    --white11: var(--white);
    --black8: var(--color2alt);
  }
  54% {
    --black8: var(--black);
    --white12: var(--white);
    --white11: var(--color2alta);
  }
  57% {
    --white11: var(--white);
    --black9: var(--black);
    --white12: var(--color2alta);
  }
  60% {
    --white12: var(--white);
    --white13: var(--white);
    --black9: var(--color2alt);
  }
  63% {
    --black9: var(--black);
    --black10: var(--black);
    --white13: var(--color2alta);
  }
  66% {
    --white13: var(--white);
    --white14: var(--white);
    --black10: var(--color2alt);
  }
  69% {
    --black10: var(--black);
    --white15: var(--white);
    --white14: var(--color2alta);
  }
  72% {
    --black11: var(--black);
    --white14: var(--white);
    --white15: var(--color2alta);
  }

  75% {
    --white15: var(--white);
    --white16: var(--white);
    --black11: var(--color2alt);
  }
  78% {
    --black11: var(--black);
    --black12: var(--black);
    --white16: var(--color2alta);
  }
  81% {
    --white16: var(--white);
    --white17: var(--white);
    --black12: var(--color2alt);
  }
  84% {
    --black12: var(--black);
    --black13: var(--black);
    --white17: var(--color2alta);
  }
  87% {
    --white17: var(--white);
    --white18: var(--white);
    --black13: var(--color2alt);
  }
  90% {
    --black13: var(--black);
    --white19: var(--white);
    --white18: var(--color2alta);
  }
  93% {
    --white18: var(--white);
    --black14: var(--black);
    --white19: var(--color2alta);
  }
  96% {
    --white19: var(--white);
    --white20: var(--white);
    --black14: var(--color2alt);
  }
  99% {
    --black14: var(--black);
    --white20: var(--color2alta);
  }
  100% {
    --white20: var(--white);
  }
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  background: hsl(33, 80%, 49%);
}
:root {
  --test-value: 0;
}
@keyframes supportTest {
  100% {
    --test-value: 1;
  }
}
body {
  animation: supportTest 1ms 0ms 1 linear forwards;
}
</style>
 